<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    省份：
    <select id="province">
        <option value="1">请选择</option>
        <option value="2">江西省</option>
        <option value="3">新疆省</option>
        <option value="4">四川省</option>
        <option value="5">湖南省</option>
        <option value="6">福建省</option>
        <option value="7">广西省</option>
    </select>
    <div>您选中的省份是：<span id="info"></span></div>
    <input type="text" id="user" autocomplete="off">
    <button id="login">登录</button>

    <script>
        let proEle = document.getElementById('province')
        let infoEle = document.getElementById('info')
        let user = document.getElementById('user')
        let login = document.getElementById('login')

        proEle.addEventListener('change', function () {
            // console.log(this.value);
            //获取选中的option下标
            let selectedIndex = this.selectedIndex;
            //作为下拉框对象的下标，获取指定的option节点对象
            // console.log(this[selectedIndex].innerText);
            //将值赋给info节点
            infoEle.innerText = this[selectedIndex].innerText
        })
        
        user.addEventListener('keyup',function(event){
            if(event.key === 'Enter'){
                console.log('登录中...');
            }
        })
    </script>
</body>

</html>